<template>
  <div class="app-container">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="dialogrules"
          size="medium"
          label-width="100px"
          label-position="left"
        >
          <el-col :span="12">
            <el-form-item label="题目类型" prop="type">
              <el-input
                v-model="formData.type"
                placeholder="请输入题目类型"
                :disabled="true"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属题库" prop="bankTypeId">
              <el-select
                v-model="formData.bankTypeId"
                default-first-option
                placeholder="请选择模板"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in questionBankType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24"></el-col>
          <el-col :span="12">
            <el-form-item label="模板分类" prop="formwork">
              <el-select
                v-model="formData.formwork"
                @change="handleFormwork()"
                default-first-option
                placeholder="请选择模板"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in formworkOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="难易程度" prop="difficulty">
              <el-select
                v-model="formData.difficulty"
                placeholder="请选择难易程度"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="(item, index) in field103Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24"></el-col>
          <el-col :span="12">
            <el-form-item label="分值" prop="fraction">
              <el-input
                v-model.trim="formData.fraction"
                placeholder="请输入分值"
                clearable
                disabled
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="小题名称" prop="smallTopic">
              <el-input
                v-model="formData.smallTopic"
                type="textarea"
                placeholder="请输入小题名称"
                :autosize="{minRows: 4, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="答案" prop="answer">
              <el-radio-group v-model="formData.answer" size="medium">
                <el-radio  :label="true">对</el-radio>
                <el-radio  :label="false">错</el-radio>
                <!-- <el-radio
                  v-for="(item, index) in pointptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >{{item.label}}</el-radio> -->
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="小题讲解" prop="explains">
              <el-input
                v-model="formData.explains"
                placeholder="请输入小题讲解"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="考察知识点" prop="investigateKnow">
              <el-input
                v-model="formData.investigateKnow"
                placeholder="请输入考察知识点"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="一级知识点" prop="knowledgeA">
              <el-input
                v-model="formData.knowledgeA"
                placeholder="请输入一级知识点"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="二级知识点" prop="knowledgeB">
              <el-input
                v-model="formData.knowledgeB"
                placeholder="请输入二级知识点"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="认知分类" prop="categorization">
              <el-input
                v-model="formData.categorization"
                placeholder="请输入认知分类"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容相关性" prop="correlation">
              <el-input
                v-model="formData.correlation"
                placeholder="请输入内容相关性"
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="dialogsubmitForm">提交</el-button>
              <el-button @click="dailogresetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
  </div>
</template>

<script>
  import {
    listQuestionbank,
    getQuestionbank,
    delQuestionbank,
    addQuestionbank,
    updateQuestionbank,
    exportQuestionbank,
  } from "@/api/topic/questionbank";
  import {
    addMoreSelect,
    search,
    changeMoreSelect,
    getFormark,
    deleQuestion,
    deleQuestions,
  } from "@/api/topic/moerselect";
  import showDetail from "@/components/showDetail";
  import { listTemplate } from "@/api/topic/template";
  import { listQuestionBankType} from "@/api/topic/QuestionBankType";
  export default {
    name: "moreselect",
    components: { showDetail: showDetail },
    data() {
      return {
        propdata: [],
        delkey: "",
        deleitemIndex: "",
        num: 1,
        myaddkey: 0,
        formData: {
          type: "判断题",
          beanName: "judgeServiceImpl",
          explains:null,
          bankTypeId:null,
          fraction: undefined,
          difficulty: undefined,
          smallTopic: undefined,
          optionCount: 0,
          point:null,
          field106: undefined,
          investigateKnow: undefined,
          knowledgeA: undefined,
          knowledgeB: undefined,
          options: [],
        },
        selectoptions: [],
        dialogrules: {
          bankTypeId:[
            {
              required: true,
              message: "请选择所属题库",
              trigger: "blur",
            },
          ],
          field108: [
            {
              required: true,
              type: "array",
              message: "请至少选择一个答案",
              trigger: "change",
            },
          ],
          explains: [
            {
              required: true,
              message: "请输入小题讲解",
              trigger: "blur",
            },
          ],
          type: [
            {
              required: true,
              message: "请输入题目类型",
              trigger: "blur",
            },
          ],
          field101: [
            {
              required: true,
              message: "请选择答案",
              trigger: "change",
            },
          ],
          fraction: [
            {
              required: true,
              message: "请输入分值,必须是数字",
              trigger: "blur",
            },
          ],
          field103: [
            {
              required: true,
              message: "请输入难易程度",
              trigger: "change",
            },
          ],
          smallTopic: [
            {
              required: true,
              message: "请输入小题名称",
              trigger: "blur",
            },
          ],
          formwork:[
            {
              required: true,
              message: "请输入或选择模板分类",
              trigger: "blur",
            },
          ],
          field108: [
            {
              required: true,
              message: "选项不能为空",
              trigger: "change",
            },
          ],
          answer: [
            {
              required: true,
              message: "请选择答案",
              trigger: "blur",
            },
          ],
          difficulty: [
            {
              required: true,
              message: "选择题目难度",
              trigger: "blur",
            },
          ],
          field110: [
            {
              required: true,
              message: "请输入考察知识点",
              trigger: "blur",
            },
          ],
          field111: [
            {
              required: true,
              message: "请输入一级知识点",
              trigger: "blur",
            },
          ],
          field112: [
            {
              required: true,
              message: "请输入二级知识点",
              trigger: "blur",
            },
          ],
          field113: [
            {
              required: true,
              message: "请输入认知分类",
              trigger: "blur",
            },
          ],
          field114: [
            {
              required: true,
              message: "请输入内容相关性",
              trigger: "blur",
            },
          ],
        },
        field103Options: [
          {
            label: "1",
            value: 1,
          },
          {
            label: "2",
            value: 2,
          },
          {
            label: "3",
            value: 3,
          },
          {
            label: "4",
            value: 4,
          },
          {
            label: "5",
            value: 5,
          },
          {
            label: "6",
            value: 6,
          },
          {
            label: "7",
            value: 7,
          },
          {
            label: "8",
            value: 8,
          },
          {
            label: "9",
            value: 9,
          },
          {
            label: "10",
            value: 10,
          },
        ],
        formworkOptions: [],
        pointptions: [
          {
            label: "对",
            value: true,
          },
          {
            label: "错",
            value: false,
          },
        ],
        queryParamsoptions: [
          {
            label: "对",
            value: true,
          },
          {
            label: "错",
            value: false,
          },
        ],
        options: [],
        // 题库
        questionBankType:[],
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 是否显示预览内容
        Showdetail: false,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 基本题库管理表格数据
        questionbankList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 题目类型字典
        typeOptions: [],
        // 认知分类字典
        categorizationOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          bigQuestion: null,
          smallTopic: null,
          type: "判断题",
          beanName: "judgeServiceImpl",
          optionCount: null,
          answer: null,
          fraction: null,
          bankTypeId:null,
          knowledgeA: null,
          knowledgeB: null,
          investigateKnow: null,
          categorization: null,
          difficulty: null,
          correlation: null,
          formwork: null,
          createTime: null,
          createBy: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getList();
      this.getFormarkdata();
      this.getDicts("question_type").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("topic_categorization").then((response) => {
        this.categorizationOptions = response.data;
      });
    },
    methods: {
      //提交模板类型
      handleFormwork(){
        // 约束分数
        console.log("模板类型",this.formData.formwork)
        for (let i = 0; i <this.formworkOptions.length; i++) {
          if(this.formworkOptions[i].value ==this.formData.formwork){
            this.formData.fraction=this.formworkOptions[i].questionScore
            this.formData.questionTemplateId=this.formworkOptions[i].id
          }
        }
      },
      //获取模板类型
      getFormarkdata() {
        this.loading = true;
        const data = {
          beanName: this.formData.beanName,
        };
        listTemplate(data).then(response => {
          this.formworkOptions=response.rows
          for (let i = 0; i < response.rows.length; i++) {
            this.formworkOptions[i].label=response.rows[i].name
            this.formworkOptions[i].value=response.rows[i].name
          }
          console.log("题型模板",this.formworkOptions)
        });
        // getFormark(data).then((response) => {
        //   for (let i = 0; i < response.length; i++) {
        //     this.formworkOptions[i] = {
        //       label: response[i],
        //       value: response[i],
        //     };
        //   }
        // });
      },
      //dialog提交表单
      dialogsubmitForm() {
        this.$refs["elForm"].validate((valid) => {
          if (isNaN(Number(this.formData.fraction))) {
            this.$message.error("分值必须为数字");
            return;
          }
          if (valid) {
            this.formData.fraction = parseFloat(this.formData.fraction);
            console.log("新增判断题",this.formData);
            addMoreSelect(this.formData).then((response) => {
              this.formData.id=response
              this.$emit('getFormData',this.formData)
              this.msgSuccess("添加判断题成功");
              this.open = false;
              this.dailogresetForm()
            });
          }

          // TODO 提交表单
        });
      },
      dailogresetForm() {
        this.formData = {
          type: "判断题",
          beanName: "judgeServiceImpl",
          explain: undefined,
          fraction: undefined,
          difficulty: undefined,
          smallTopic: undefined,
          optionCount: 0,
          bankTypeId:undefined,
          field106: undefined,
          field108: 3,
          answer: undefined,
          investigateKnow: undefined,
          knowledgeA: undefined,
          knowledgeB: undefined,
          field113: undefined,
          field114: undefined,
          scoretype:undefined,
          options: [],
        };
        this.options = [];
        this.selectoptions = [];
        (this.delkey = ""),
          (this.deleitemIndex = ""),
          (this.num = 1),
          (this.myaddkey = 0);
      },
      /** 查询基本题库管理列表 */
      getList() {
        this.loading = true;
        listQuestionbank(this.queryParams).then((response) => {
          this.questionbankList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        listQuestionBankType().then(response => {
          this.questionBankType=response.rows
        });
      },
      // 题目类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      // 认知分类字典翻译
      categorizationFormat(row, column) {
        return this.selectDictLabel(
          this.categorizationOptions,
          row.categorization
        );
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          parentId: null,
          personId: null,
          bigQuestion: null,
          smallTopic: null,
          type: null,
          optionCount: null,
          answer: null,
          fraction: null,
          knowledgeA: null,
          knowledgeB: null,
          investigateKnow: null,
          categorization: null,
          difficulty: null,
          correlation: null,
          formwork: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 预览按钮操作 */
      handleShow(row) {
        this.propdata = row;
        this.Showdetail = true;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.dailogresetForm();
        this.reset();
        this.open = true;
        this.title = "添加判断题题库管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.dailogresetForm();
        // const id = row.id || this.ids;
        const data = {
          bankId: row.id || this.ids[0],
          beanName: "judgeServiceImpl",
        };
        search(data).then((response) => {
          this.formData = response;
          this.formData.answer=""
          console.log(this.formData)
          this.open = true;
          this.title = "修改判断题题库管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateQuestionbank(this.form).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addQuestionbank(this.form).then((response) => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        let data = {};
        if (typeof ids == "string") {
          data = {
            bankId: ids,
            beanName: this.formData.beanName,
          };
          this.$confirm(
            '是否确认删除判断题题库管理编号为"' + ids + '"的数据项?',
            "警告",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(function () {
              return deleQuestion(data);
            })
            .then(() => {
              this.getList();
              this.msgSuccess("删除成功");
            })
            .catch(() => {});
        } else {
          data = {
            bankIds: ids,
            beanName: this.formData.beanName,
          };
          this.$confirm(
            '是否确认删除判断题题题题库管理编号为"' + ids + '"的数据项?',
            "警告",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(function () {
              return deleQuestions(data);
            })
            .then(() => {
              this.getList();
              this.msgSuccess("删除成功");
            })
            .catch(() => {});
        }
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有判断题题库管理数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.exportLoading = true;
            return exportQuestionbank(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
            this.exportLoading = false;
          })
          .catch(() => {});
      },
    },
  };
</script>
<style>
  .radio-answer {
    margin-left: 10px;
  }
  .radio-answer-point {
    margin-left: 5px;
    color: #909399;
  }
  .bank-radio {
    display: flex;
    flex-direction: column;
  }
  .radio-item {
    margin-top: 10px;
  }
  .icon {
    display: inline;
    margin-left: 20px;
  }
</style>








